{extend name="Layout/edit" /}
{block name="content"}
<!-- form start -->
<form class="form-horizontal" action="{:url('editSave')}" method="post">
    <div class="box-body">
        {if condition="empty($data['id'])"}
        <div class="form-group">
            <label class="col-sm-2 control-label">用户名</label>
            <div class="col-sm-10">
                <input type="text" name="user_name" class="form-control input-sm" placeholder="用户名" required="required" />
            </div>
        </div>
        {/if}
        <div class="form-group">
            <label class="col-sm-2 control-label">密码</label>
            <div class="col-sm-10">
                <div class="input-group">
                    <span class="xsui-password-input"><input type="password" name="password" class="form-control input-sm" placeholder="密码" required="required" value="{$data.password}" /></span>
                    <span class="input-group-btn">
                        <button class="btn btn-default btn-sm xsui-btn-show-password" type="button" title="显示密码"><span class="glyphicon glyphicon-eye-open"></span></button>
                    </span>
                </div>                
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">姓名</label>
            <div class="col-sm-10">
                <input type="text" name="name" class="form-control input-sm" placeholder="姓名" value="{$data['name']}" />
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">电子邮件</label>
            <div class="col-sm-10">
                <input type="email" name="email" class="form-control input-sm" placeholder="电子邮件" value="{$data['email']}" />
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">手机号码</label>
            <div class="col-sm-10">
                <div class="input-group">
                    <input type="text" name="mobile" class="form-control input-sm" placeholder="手机号码" value="{$data['mobile']}" />
                    <span class="input-group-btn">
                        <button class="btn btn-danguage btn-sm" type="button">发送验证码</button>
                    </span>
                </div>                
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">出生日期</label>
            <div class="col-sm-5">
                <div class="input-group date xsui-datepicker" data-link-field="birthday">
                    <input type="text" name="birthday" class="form-control input-sm" value="{$data.birthday}" placeholder="出生日期" />
                    <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
                    <span class="input-group-addon"><span class="glyphicon glyphicon-time"></span></span>
                </div>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">地区</label>
            <div class="col-sm-10">
                <div class="btn-group btn-group-justified xsui-area-picker" data-province-url="{:url('Area/get_province')}" data-city-url="{:url('Area/get_city','pid=varpid')}" data-area-url="{:url('Area/get_area','pid=varpid&cid=varcid')}">
                    <div class="btn-group">
                        <div class="input-group">
                            <span class="input-group-addon">省份</span>
                            <select name="province" class="form-control">
                                <option value="">==选择省份==</option>
                            </select>
                        </div>
                    </div>
                    <div class="btn-group">
                        <div class="input-group">
                            <span class="input-group-addon">城市</span>
                            <select name="city" class="form-control">
                                <option value="">==选择城市==</option>
                            </select>
                        </div>
                    </div>
                    <div class="btn-group">
                        <div class="input-group">
                            <span class="input-group-addon">地区</span>
                            <select name="area" class="form-control">
                                <option value="">==选择地区==</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">用户头像</label>
            <div class="col-sm-10">
                <div class="input-group">
                    <input type="text" name="face_url" class="form-control input-sm"  placeholder="用户头像"  value="{$data['face_url']}"/>
                    <span class="input-group-btn">
                        <a href="{:url('Uploader/delete')}" class="btn btn-default btn-sm xsui-btn-singlefile-delete-image" title="删除图片">删除</a>
                        <a href="{:url('Uploader/single_file','name=face_url')}" class="btn btn-default btn-sm xsui-btn-singlefile-uploader-image" title="选择图片并上传">上传</a>
                    </span>
                </div>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">备注信息</label>
            <div class="col-sm-10">
                <input type="text" name="remark" class="form-control input-sm"  placeholder="备注信息" size="79" value="{$data['remark']}" />
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">状态</label>
            <div class="col-sm-10">
                {xshtml:radio name="status" data='array("1"=>"启用","0"=>"禁用")' value="data['status']|default='1'" /}
            </div>
        </div>
    </div>
    <input type="hidden" name="id" value="{$data['id']}" />
    <!-- /.box-body -->
    <div class="box-footer">
        <button type="button" class="btn btn-default xsui-btn-close-dialog">取消</button>
        <button type="submit" class="btn btn-primary pull-right">保存</button>
    </div>
    <!-- /.box-footer -->
</form>
{/block}
{block name="script_after"}
<script>
    // 显示隐藏密码 2017-3-15
    $('.xsui-btn-show-password').mousedown(function () {
        var value = $('.xsui-password-input').find('input').val();
        $('.xsui-password-input').html('<input type="text" name="password" class="form-control input-sm" placeholder="密码" required="required" value="' + value + '" />');
    }).mouseup(function () {
        var value = $('.xsui-password-input').find('input').val();
        $('.xsui-password-input').html('<input type="password" name="password" class="form-control input-sm" placeholder="密码" required="required" value="' + value + '" />');
    })
    initAreaPicker();
    /**
     * 初始化省市区
     * @returns {undefined}
     * @since 1.0 2017-4-12 SoChishun Added.
     */
    function initAreaPicker() {
        //$('.xsui-area-picker').regionPicker();
        var $areapicker = $('.xsui-area-picker');
        $.get($areapicker.data('provinceUrl'), function (data) {
            var str = '<option value="">==选择省份==</option>';
            for (var i in data) {
                str += '<option value="' + data[i].pid + '">' + data[i].name + '</option>';
            }
            $areapicker.find('[name="province"]').html(str);
        })
        $areapicker.find('[name="province"]').change(function () {            
            var url=$areapicker.data('cityUrl').replace('varpid', $(this).val());
            $.get(url, function (data) {
                var str = '<option value="">==选择城市==</option>';
                for (var i in data) {
                    str += '<option value="' + data[i].cid + '">' + data[i].name + '</option>';
                }
                $areapicker.find('[name="city"]').html(str);
            });
        });
        $areapicker.find('[name="city"]').change(function () {
            var url=$areapicker.data('areaUrl').replace('varcid', $(this).val()).replace('varpid',$areapicker.find('[name="province"]').val());
            console.log(url);
            $.get(url, function (data) {
                var str = '<option value="">==选择地区==</option>';
                for (var i in data) {
                    str += '<option value="' + data[i].aid + '">' + data[i].name + '</option>';
                }
                $areapicker.find('[name="area"]').html(str);
            });
        });
    }
</script>
{/block}